<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>系统角色</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
    <![endif]-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.12.4.min.js">\x3C/script>')</script>
    <!--也可以用yepnopejs 加载器;直接是window对象-->
    <!--Font Awesome  一套绝佳的图标字体库和CSS框架 无需依赖JavaScript 无限缩放  完全免费 jquery-confirm里面用到 官网http://fontawesome.dashgame.com/-->
    <link href="css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- bootstrap 3.0.2 -->
    <link href="css/bootstrap-3.2.0/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-box.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-page.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="js/resizableColumns/jquery.resizableColumns.css">
    <link href="css/myStyle.css" rel="stylesheet" type="text/css"/>
    <link href="js/jquery-confirm/jquery-confirm.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-confirm/jquery-confirm.js"></script>
    <script type="text/javascript" src="js/resizableColumns/jquery.resizableColumns.js"></script>
    <script type="text/javascript" src="js/jsviews.js"></script>
    <script type="text/javascript" src="js/loadTmpl.js"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/tableGrid/jquery.tableGrid.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript">
        $.views.converters("isSelected", function (first, last) {
            if (first == null) return "";
            return first.parentId == last ? "selected=selected" : "";
        });
        //从后台取数据，并加载模板
        function displayContent1(search) {
            if (search == 1) {
                nextPage = 0;
            }
            var resourceName = $("#roleName").val();
            //var nextPage=$("#_click_page").val();			//不变
            if (typeof(nextPage) == 'undefined' || nextPage == "") {
                nextPage = 0;
            }
            var pageSize = $("#selectPageSize").val();
            if (typeof(pageSize) == 'undefined' || pageSize == "") {
                pageSize = 10;
            }
            var sortData = "[{property:'roleId',direction:'ASC'}]";
            var jsonFilter = "{search_LIKE_roleName:\"" + resourceName + "\"}";
            var url = root + "xaCmsRole/showRoles";
            $.ajax({
                url: url,
                dataType: 'json',
                method: 'post',
                data: {
                    nextPage: nextPage,
                    pageSize: pageSize,
                    sortDate: sortData,
                    jsonFilter: jsonFilter
                },
                success: function (data) {
                    if (typeof data === 'string') {
                        data = JSON.parse(data);
                    }
                    var tableData = data.object.content;
                    var tblContentHtml = $("#tableContentTmple").render(tableData);
                    $("#mycontent").html(tblContentHtml);
                    //去掉复选状态
                    $("#_selectAll").prop({checked: false});
                    //加载分页器
                    loadTmpl.renderExternalTemplate("page", "#displayPage", data.object);
                }
            });
        }
        //从后台取数据，并加载模板
        function displayContent() {
            var resourceName = $("#roleName").val();
            var nextPage = $("#_click_page").val();			//不变
            if (typeof(nextPage) == 'undefined' || nextPage == "") {
                nextPage = 0;
            }
            var pageSize = $("#selectPageSize").val();
            if (typeof(pageSize) == 'undefined' || pageSize == "") {
                pageSize = 10;
            }
            var sortData = "[{property:'roleId',direction:'ASC'}]";
            var jsonFilter = "{search_LIKE_roleName:\"" + resourceName + "\"}";
            var url = root + "xaCmsRole/showRoles";
            //+nextPage+"/"+pageSize+"/"+sortDate+"/"+jsonFilter;

            $.ajax({
                url: url,
                dataType: 'json',
                method: 'post',
                data: {
                    nextPage: nextPage,
                    pageSize: pageSize,
                    sortData: sortData,
                    jsonFilter: jsonFilter
                },
                success: function (data) {
                    if (typeof data === 'string') {
                        data = JSON.parse(data);
                    }
                    var tableData = data.object.content;
                    var tblContentHtml = $("#tableContentTmple").render(tableData);
                    $("#mycontent").html(tblContentHtml);
                    //去掉复选状态
                    $("#_selectAll").prop({checked: false});
                    //加载分页器
                    loadTmpl.renderExternalTemplate("page", "#displayPage", data.object);
                }
            });
        }

        $(function () {
            $("#example2").resizableColumns({});	//列拖动
            //行高亮,选中
            $("#example2").tableGrid({
                checkAllId: "_selectAll",	//全选框的ID属性
                singleCheckboxClass: "ckSelect",
                selectRowClass: "warning",
                paging: "displayPage",
                pageAjax: function () {
                    displayContent();
                }
            });
            //点击新增按钮
            $("#addSome").click(function () {
                window.location.href = root + "addRole.html";
            });
            //点击修改按钮
            $("#updateSome").click(function () {
                $("#myModalLabel").html("修改资源信息");
                var updateArray = new Array();
                $(".ckSelect").each(function () {
                    var check = $(this).is(':checked');
                    if (check) {
                        var _id = $(this).attr("ckId");
                        updateArray.push(_id);
                    }
                });
                if (updateArray.length == 0) {
                    myAlert("请选择要编辑的项");
                    return;
                }
                if (updateArray.length > 1) {
                    myAlert("每次只能编辑一项");
                    return;
                }
                window.location.href = root + "updateRole.html?roleId=" + updateArray[0];

            });
            //点击查询按钮
            $("#search").click(function () {
                displayContent1(1);
            });
            //点击删除按钮
            $("#delSome").click(function () {
                var delArray = new Array();
                $(".ckSelect").each(function () {
                    var check = $(this).is(':checked');
                    if (check) {
                        var _id = $(this).attr("ckId");
                        delArray.push(_id);
                    }
                });
                if (delArray.length == 0) {
                    myAlert("请选择要删除的项");
                    return
                }
                if ($.inArray('1', delArray) != -1) {
                    myAlert($('#ck_1').parent().next().html() + "角色不能删除");
                    return;
                }
                myConfirm("你确定要删除选中项吗？", function () {
                    var delIds = "" + delArray + "";
                    var url = root + "xaCmsRole/role/" + delIds;
                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        dataType: 'json',
                        success: function (data) {
                            if (typeof data === 'string') {
                                data = JSON.parse(data);
                            }
                            if (data.status == 1) {
                                displayContent();
                            } else {
                                myAlert(data.result);
                            }
                        }
                    });
                });
            });
        });
    </script>
</head>
<body>
<section>
    <div>
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <span class="add-on" style="float:left;line-height:30px;">角色名称：</span><input type="text"
                                                                                                 placeHolder="角色名称"
                                                                                                 class="form-control input-sm"
                                                                                                 style="width:200px;float:left;margin-right:20px;"
                                                                                                 id="roleName"/>
                    <input type="button" value="搜索" id="search" class="searchBtn">
                </div>
                <div class="box-header">
                    <input type="button" value="新增" id="addSome" class="btn btn-success">
                    <input type="button" value="删除" id="delSome" class="btn btn-danger">
                    <input type="button" value="编辑" id="updateSome" class="btn btn-info">
                </div>
                <div class="box-body table-responsive">
                    <table id="example2" class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="_selectAll"/></th>
                            <th id='resourceName'>角色</th>
                            <th id='resourceUrl'>描述</th>
                        </tr>
                        </thead>
                        <!-- 表格内容 start -->
                        <tbody id="mycontent"></tbody>
                        <!-- 表格内容 end -->
                    </table>
                    <!-- 分页标签 start -->
                    <div class="row page_big_div" id="displayPage"></div>
                    <!-- 分页标签 end -->
                    <script id="tableContentTmple" type="text/x-jsrender">
								<tr><td><input id="ck_{{:roleId}}" ckId="{{:roleId}}" class="ckSelect" type="checkbox" /></td><td>{{getLineStr:roleName 10}}</td><td>{{getLineStr:roleDesc 20}}</td></tr>


                    </script>
                </div>
            </div>
        </div>
</section>
</body>
</html>